<!--
 * @Description:选项卡
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-01 22:12:28
 -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>选项卡</title>
		<style>
			#div input.active{background: yellow;}
			#divmo{width: 200px; height: 200px;background: #F1F1F1;}
			#divmo >div{display: none; width: 100%; height: 200px;}
			#divmo >div:first-child{display: block;}
		</style>
		<script>
			window.onload = function () {
			  var div1 = document.getElementById("div")
			  var abtn = div1.getElementsByTagName("input")
				var divmo = document.getElementById("divmo")
			  var adiv = divmo.getElementsByTagName("div")
        for (let i = 0; i < abtn.length; i++) {
					abtn[i].index=i;
        	abtn[i].onclick=function(){
						for (let i = 0; i < abtn.length; i++) {
							 abtn[i].className='';
							 adiv[i].style.display='none';
						}
						this.className='active';
						adiv[this.index].style.display='block';
					}
        }
			}
		</script>
	</head>

	<body>
		<div>
			 js 动态添加的属性 有效 <br>
			 手动添加无效
		</div>
		<div id="div">
			<input type="button" value="教育" class="active">
			<input type="button" value="培训">
			<input type="button" value="招生">
			<input type="button" value="出国">
			<div id="divmo">
				<div>教育</div>
				<div>培训</div>
				<div>招生</div>
				<div>出国</div>
			</div>
		</div>
	</body>

</html>
